import { useReducer } from 'react'
import AddTask from './AddTask'
import TaskList from './TaskList'
import tasksReducer from './tasksReducer.js'

import { Divider } from 'antd'

const View: React.FC = () => {
    const [tasks, dispatch] = useReducer(tasksReducer, initialTasks)

    function handleAddTask(text: any) {
        dispatch({
            type: 'added',
            id: nextId++,
            text: text,
        })
    }

    function handleChangeTask(task: any) {
        dispatch({
            type: 'changed',
            task: task,
        })
    }

    function handleDeleteTask(taskId: any) {
        dispatch({
            type: 'deleted',
            id: taskId,
        })
    }

    return (
        <>
            <Divider orientation="left">布拉格的行程安排</Divider>
            <AddTask onAddTask={handleAddTask} />
            <TaskList
                tasks={tasks}
                onChangeTask={handleChangeTask}
                onDeleteTask={handleDeleteTask}
            />
        </>
    )
}

let nextId = 3
const initialTasks = [
    { id: 0, text: '参观卡夫卡博物馆', done: true },
    { id: 1, text: '看木偶戏', done: false },
    { id: 2, text: '打卡列侬墙', done: false },
]


export default View